<template>
    <view>
		<view class="" style="background-color: #fff;height: 60upx;width: 750upx;">
			<input  style=" padding: 0upx 50upx; width:90%;height: 60upx;line-height: 100upx; background-color: #F3F3F3;border-radius: 50upx;margin: 0upx 5%;" type="text" placeholder="搜索门店" />
		</view>
		<view class="" style="display: flex;background-color: #fff;height: 60upx;justify-content: space-between;padding: 0upx 30upx;">
			 <view>
				<pick-regions :default-regions="defaultRegions" @getRegions="handleGetRegions">
					<text>选择省市区<text style="margin-left: 30upx;"> {{regionsName}}</text></text>
				</pick-regions>
			</view>
			<view class="" v-show="isShow" @click="showOrHideMsg">
				列表
			</view>
			<view class="" v-show="isTrue" @click="showOrHide">
				地图
			</view>
		</view>
		<view class="" v-show="isTrue" >
			<view @click="map" v-for="(item, index) in list" :key="index" style="height: 150upx;background-color: #fff;margin-top: 20upx;">
				<view class="" style="display: flex;justify-content: space-around;">
					<view class="" style=" font-size: 34upx;">
						{{item.shop_name}}
					</view>
					<view class="">
						电话号码:{{item.mobile}}
					</view>
				</view>
				<view class="" style="background-color: #fff;display: flex;margin-left: 50upx;margin-top: 20upx;">
					<view class="">
						<text>{{item.province_name}}{{item.city_name}}{{item.district_name}}</text>
					</view>
					
					<view class="">
							{{item.address}}
					</view>
					
				</view>
			</view>
			<view class="" style="text-align: center;color: #9B9B9B;">
				没有更多门店了~
			</view>
		</view>
		
        <view class="page-body" v-show="isShow">
            <view class="page-section page-section-gap">
                <map style="width: 100%; height: 700px;" :latitude="latitude" :longitude="longitude" :markers="covers">
                </map>
            </view>
        </view>
    </view>
</template>

<script>
	 import pickRegions from '@/components/pick-regions/pick-regions.vue'
	export default {
		  components:{
				pickRegions
			},
	    data() {
				return {
					user_id:'',
					isShow: false,
					isTrue: true,
					regions:[],
					res:[],
					list:[],
					lat:"1233.00",
					lng:"1122.00",
					defaultRegions:['广东省','广州市','番禺区'],
					id:0, // 使用 marker点击事件 需要填写id
					title: 'map',
					latitude: 39.909,
					longitude: 116.39742,
					covers: [{
							latitude: 39.909,
							longitude: 116.39742,
							// iconPath: '../../../static/location.png'
					}, {
							latitude: 39.90,
							longitude: 116.39,
							// iconPath: '../../../static/location.png'
					}]
				}
	    },
				computed:{
					regionsName(){
						// 转为字符串
						return this.regions.map(item=>item.name).join(' ')
					}
				},
			onLoad:function(){
					uni.showLoading()
					uni.getStorage({
						key: 'user_id',
						success: (res) => {
							this.user_id = res.data
							this.setAjax()
						},
						fail: () => {
							uni.navigateTo({
								url: '../../login/login'
							});
						}
					});
				},
	    methods: {
				map(){
					uni.getLocation({
						type: 'gcj02', //返回可以用于uni.openLocation的经纬度
						success: function (res) {
							uni.openLocation({
								latitude: this.lat,
								longitude: this.lng,
								success: function () {
										console.log('success');
								}
							});
						}
					});
				},
				//获取数据
				setAjax(){
					uni.hideLoading()
					uni.request({
						url: 'https://cx.mingmeijt.com/Api/Shop/index',
						method: 'POST',
						header:{'Content-Type':'application/x-www-form-urlencoded'},
						// data:{
						//  user_id: this.user_id,
						// },
						success: res => {
						 console.log(res)
							this.list = res.data.data.list
							this.lat = res.data.data.list.lat
							this.lng = res.data.data.list.lng
							
						},
						fail: () => {},
						complete: () => {}
					 });	
				},
	 // 获取选择的地区
	            handleGetRegions(regions){
	                this.regions = regions
	            },
				showOrHideMsg: function () {
				                // 取反
				                this.isShow = !this.isShow;
								  this.isTrue = !this.isTrue;
				            },
				showOrHide: function () {
					// 取反
					 this.isShow = !this.isShow;
					   this.isTrue = !this.isTrue;
				}
	        }
	}
	
</script>

<style>

</style>
